import React, { Component } from 'react';
import { Form, Space, Input, Button, Select, Typography, Card } from "antd";

const { Paragraph } = Typography;

class Applet extends Component {
    state = {
        data: "",
        itemList: {
            "openGoodsDetail": [
                "storeId", "goodsId", "activityId", "activityDetailid"
            ],
            "test": [
                "storeId", "goodsId",
            ],
        }
    }
    onFinish = async (values) => {
        console.log(values)
        // values.isGG = true
        values.isShare = "1"
        this.setState({
            data: "params=" + encodeURIComponent(JSON.stringify(values)),
        })
    }
    onValuesChange = (values) => {
        // console.log(values)
    }
    reset = () => {
        this.formRef.resetFields()
        this.setState({
            data: ""
        })
    }

    render() {
        const { itemList } = this.state
        return (
            <div className="p-layout-box">
                <Form
                    labelCol={{ span: 3 }}
                    wrapperCol={{ span: 4 }}
                    onFinish={this.onFinish}
                    onValuesChange={this.onValuesChange}
                    ref={ref => this.formRef = ref}
                >
                    <Form.Item
                        label="目标指令(act)" name="act"
                        rules={[{ required: true, message: '请选择' }]}
                        initialValue={"openGoodsDetail"}
                    >
                        <Select
                            options={[
                                {
                                    "value": "openGoodsDetail",
                                    "label": "商品详情"
                                },
                                // {
                                //     "value": "test",
                                //     "label": "test"
                                // },
                            ]}
                        />
                    </Form.Item>
                    <Form.Item
                        noStyle
                        shouldUpdate={(prevValues, currentValues) => prevValues.act !== currentValues.act}
                    >
                        {({ getFieldValue }) =>
                            itemList[getFieldValue('act')].map(item => {
                                return <Form.Item
                                    label={item} name={item}
                                    rules={[]}
                                    getValueFromEvent={e => e.target.value.trim()}
                                >
                                    <Input />
                                </Form.Item>
                            })
                        }
                    </Form.Item>
                    <Form.Item
                        wrapperCol={{
                            offset: 3,
                            span: 10,
                        }}
                    >
                        <Space>
                            <Button onClick={() => this.reset()}>重置</Button>
                            <Button haspermi={['miniAdConfig:create']} htmlType="submit" type="primary">生成</Button>
                        </Space>
                    </Form.Item>
                </Form>
                <Card
                    title="生成结果"
                >
                    {
                        this.state.data ? <Paragraph copyable>{this.state.data}</Paragraph> : null
                    }
                </Card>
            </div>
        );
    }
}

export default Applet;
